<script setup>
import { nextTick, onBeforeUnmount, onMounted, reactive, ref } from "vue"
import { OlMap } from "@/utils/openlayers"
import { ElMessage } from "element-plus"
import http from "@/utils/http"
import useEventBus from "@/utils/event.bus"
import { Close } from "@element-plus/icons-vue"
import { useRouter, useRoute } from "vue-router"
import DialogDahuaPlayer from '@/components/DialogDahuaPlayer.vue'
import EventComponents from "@/views/map/components/EventComponents.vue"
import formatDate from '@/utils/date'
import RealPath from '@/utils/cy.map.realpath'
import {
    fetchSetMaptZoom,
    fetchMapGrid,
    fetchRemoveMarkerById,
    fetchMapMarker,
    fetchMapZones
} from '@/api/map.services'
import { editDeviceItem } from "@/api/device.services"
const router = useRouter()
const route = useRoute()
const eventBus = useEventBus()

onMounted(() => {
    // eventBus.on("alarmTip", alarmTip)
})
onBeforeUnmount(() => {
    // eventBus.off('alarmTip')
})
const alarmTip = (e) => {
    // mapBox.test([], e)
}
let mapBox = null
const optionsinfo = ref({})
const map_type = ref("")
//地图操作标识
const operate = ref(1)
/**
 * @param {*} options
 * @param {*} type
 */
const init = (options, type, callback, id = 'mapBox') => {
    optionsinfo.value = options
    map_type.value = options.map_type
    operate.value = type
    mapBox = new OlMap(id)
    /**
     * 重新定义方法
     * 1:点位点击方法 clickFeature
     * 2:网格点击方法
     */
    const config = {
        id: id,
        type: type,
        eye_open: false
    }
    mapBox.init(options, config, (map, markerC) => {
        completeMap(map, markerC, callback || function () { })
    }, id)
}
/**
 * @param {*} options
 * @param {*} type
 */
const completeMap = async (map, markerC, callback) => {
    const marker = optionsinfo.value.marker
    mapBox.createClusterMarker([marker])
    const feature = mapBox.markerLayers[0].feature
    mapBox.map.getView().animate({
        center: feature.getGeometry().getCoordinates(),
        duration: 500
    })
}
// 输出组件的方法，让外部组件可以调用
defineExpose({
    init
})
</script>
<template>
    <div style="position: relative">
        <div class="mapBox"></div>
        <div style="display: none" class="warning sky-marker-shashuo"></div>
    </div>
</template>
<style lang="scss" scoped>
.mapBox {
    width: 100%;
    height: 100%;
    position: relative;
}

.sky-marker-shashuo {
    width: 36px;
    height: 36px;
    animation: skyMarkerShashuo 5s infinite;
}

@keyframes skyMarkerShashuo {
    0% {
        box-shadow: 0 0 5px 5px red;
    }

    50% {
        box-shadow: 0 0 5px 5px transparent;
    }

    100% {
        box-shadow: 0 0 5px 5px red;
    }
}
</style>
